<template>
  <el-card class="mt-20">
    <!-- 按下回车键  页面会更新 -->
    <el-form @submit.prevent>
      <el-form-item label="属性名">
        <el-input
          placeholder="请输入属性名"
          class="attr-input"
          v-model="addAttrFormData.attrName"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="Plus"
          :disabled="!addAttrFormData.attrName"
          @click="addAttrValue"
          >添加属性</el-button
        >
        <el-button>取消</el-button>
      </el-form-item>
      <el-table :data="addAttrFormData.attrValueList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="60px"
          border
        />
        <el-table-column label="属性值名称">
          <template v-slot="{ row, $index }">
            <el-input
              class="attrValue-input"
              ref="inputRef"
              v-model="row.valueName"
              v-if="row.isEdit"
              @blur="switchShow(row, $index)"
              @keyup.enter="handleSwitchShow(row)"
            />
            <div v-else @click="switchEdit(row, $index)">
              {{ row.valueName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row, $index }">
            <!-- dark  深色  light  浅色-->
            <el-tooltip
              class="box-item"
              effect="light"
              content="删除属性"
              placement="bottom"
            >
              <span>
                <el-popconfirm
                  :title="`你确定要删除${row.valueName}吗？`"
                  @confirm="delAttrValue($index)"
                >
                  <template #reference>
                    <el-button :icon="Delete" type="danger" size="small" />
                  </template>
                </el-popconfirm>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item class="mt-10">
        <el-button
          type="primary"
          :disabled="isBtnDisabled"
          @click="addOrUpdateAttr"
          >保存</el-button
        >
        <el-button @click="showAttrList">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AddOrUpdateAttr",
};
</script>

<script lang="ts" setup>
import { reactive, ref, nextTick, computed } from "vue";
import { Delete, Plus } from "@element-plus/icons-vue";
import type { AttrItem, AttrValueItem } from "@/api/product/model/attrModel";
import { saveAttrListUrlApi } from "@/api/product/attr";
import { useAttrStore } from "@/stores/attr";
import { useCategoryStore } from "@/stores/category";
import { ElMessage } from "element-plus";

const attrStore = useAttrStore();

const inputRef = ref();

const addAttrFormData = reactive<AttrItem>({
  attrName: attrStore.attrName,
  attrValueList: attrStore.attrValueList,
});

// 失去焦点  变成显示模式
const switchShow = (row: AttrValueItem, index: number) => {
  row.isEdit = false;
  if (!row.valueName) {
    addAttrFormData.attrValueList.splice(index, 1);
  }
};

// 按回车键，失去焦点变成显示模式，不删除
const handleSwitchShow = (row: AttrValueItem) => {
  row.isEdit = false;
};

// 获取焦点 变成编辑模式
const switchEdit = async (row: AttrValueItem, index: number) => {
  row.isEdit = true;
  await nextTick();
  inputRef.value.focus();
};
// 删除属性值
const delAttrValue = (index: number) => {
  addAttrFormData.attrValueList.splice(index, 1);
};

// 保存按钮禁用效果
const isBtnDisabled = computed(() => {
  return (
    !addAttrFormData.attrName ||
    !addAttrFormData.attrValueList.some((attrValue) => attrValue.valueName)
  );
});

// 点击添加属性值按钮
const addAttrValue = async () => {
  addAttrFormData.attrValueList.push({
    valueName: "",
    isEdit: true,
  });

  await nextTick();

  inputRef.value.focus();
};

const categoryStore = useCategoryStore();

// 点击添加或修改属性
const addOrUpdateAttr = async () => {
  await saveAttrListUrlApi({
    ...addAttrFormData,
    categoryId: categoryStore.category3Id as number,
    categoryLevel: 3,
    id: attrStore.id,
  });
  // 发送完请求后 显示上一个页面  提示信息 修改 或  添加 属性成功
  showAttrList();
  ElMessage.success(`${attrStore.id ? "修改" : "添加"}属性成功`);
};

const emit = defineEmits(["setIsShowAttrList"]);
const showAttrList = () => {
  emit("setIsShowAttrList", true);
};
</script>

<style scoped>
.attr-input {
  width: 200px;
}
.attrValue-input {
  width: 550px;
}
</style>
